<template>
  <div class="container">
    <h1 class="title">宋朝基本服装</h1>
    <p class="intro">
      宋朝的基本服装不仅反映了当时的社会等级和文化，而且体现了当时的文化特点和社会风尚以及经济的繁荣和服饰工艺的发展。
    </p>
    <div class="clothing-wrapper">
      <!-- 四种服装展示 -->
      <div
        v-for="(clothing, index) in clothes"
        :key="clothing.name"
        class="clothing-item"
        @mouseover="hoverEffect(index)"
        @mouseleave="resetEffect(index)"
      >
        <transition name="fade">
          <img :src="clothing.image" :alt="clothing.name" class="clothing-image" />
        </transition>
        <div class="clothing-info">
          <h2>{{ clothing.name }}</h2>
          <p>{{ clothing.description }}</p>

          <!-- 详细介绍部分 -->
          <div v-if="hoveredIndex === index" class="details-section">
            <h3>详细介绍</h3>
            <p>{{ clothing.details }}</p>

            <h3>特点</h3>
            <ul>
              <li v-for="(feature, featureIndex) in clothing.features" :key="featureIndex">{{ feature }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'SongClothingDisplay',
  setup() {
    // 服装信息
    const clothes = ref([
      {
        name: '直裾',
        image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.F8Haqm6N3g3XcnF31nBXMAHaKJ?w=121&h=180&c=7&r=0&o=5&dpr=2&pid=1.7', // 替换为实际图片链接
        description: '直裾是宋朝常见的男装，袖口宽松，衣身直筒，简洁舒适。',
        details: '直裾是一种非常简洁且实用的服装设计，适合各种场合，尤其是日常穿着。',
        features: [
          '衣身直筒，适合活动',
          '宽松的袖口提供舒适感',
          '材料轻便适合温暖气候',
        ]
      },
      {
        name: '曲裾',
        image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.lTh--uXGaAjTDnUJ2PpoewAAAA?w=141&h=212&c=7&r=0&o=5&dpr=2&pid=1.7', // 替换为实际图片链接
        description: '曲裾是一种男女皆可穿的传统服装，带有特殊的折叠设计。',
        details: '曲裾具有独特的折叠设计，既体现了宋代审美，又能带来一定的层次感。',
        features: [
          '独特的曲裾折叠设计',
          '适用于正式场合或节庆',
          '服装设计优雅',
        ]
      },
      {
        name: '袍服',
        image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.AdXnd5naI98UIEzJcUyAfAHaHa?w=194&h=194&c=7&r=0&o=5&dpr=2&pid=1.7', // 替换为实际图片链接
        description: '袍服是宋朝常见的礼服，适用于正式场合，整体设计庄重典雅。',
        details: '袍服是宋代的传统礼服，通常用于重要的社交场合或典礼中。',
        features: [
          '庄重典雅适合正式场合',
          '宽松设计，给予尊贵感',
          '精致的细节和刺绣装饰',
        ]
      },
      {
        name: '圆领袍',
        image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.EHP5wms9mdKU-Zpvqh2i7gHaJe?w=194&h=248&c=7&r=0&o=5&dpr=2&pid=1.7', // 替换为实际图片链接
        description: '圆领袍是一种经典的宋代服装，衣领圆形，给人一种温文尔雅的感觉。',
        details: '圆领袍的设计充满古典美，圆形的领口体现了宋代礼仪文化的端庄。',
        features: [
          '简洁优雅圆形领口设计',
          '适合正式和非正式场合',
          '整体风格简洁大方',
        ]
      }
    ]);

    // 动态效果
    const hoveredIndex = ref(null);

    const hoverEffect = (index) => {
      hoveredIndex.value = index;
    };

    const resetEffect = () => {
      hoveredIndex.value = null;
    };

    return { clothes, hoveredIndex, hoverEffect, resetEffect };
  }
};
</script>

<style scoped>
.container {
  text-align: center;
  padding: 20px;
  font-family: '微软雅黑', sans-serif;
}

/* 简介部分样式 */
.intro {
  font-size: 18px;
  color: #555;
  margin-bottom: 40px;
  line-height: 1.6;
  transition: all 0.3s ease;
}


.title {
  margin-left: 42%;
  font-size: 36px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.clothing-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px;
}

.clothing-item {
  width: 250px;
  border: 2px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

.clothing-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.clothing-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: opacity 0.5s ease;
}

.clothing-info {
  padding: 15px;
  background-color: #f9f9f9;
  border-top: 1px solid #ddd;
}

.clothing-info h2 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: #333;
}

.clothing-info p {
  font-size: 1rem;
  color: #666;
}

.details-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #e9f7fa;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.details-section h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #0277bd;
}

.details-section p,
.details-section ul {
  font-size: 1rem;
  color: #444;
}

.details-section ul {
  list-style-type: disc;
  padding-left: 20px;
}

.details-section li {
  margin-bottom: 8px;
}

/* 动画效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .clothing-wrapper {
    flex-direction: column;
    align-items: center;
  }
  .clothing-item {
    width: 80%;
    margin: 10px 0;
  }
}
</style>